<template>
  <el-dialog
    v-model="dialogVisible"
    title="标签成员"
    width="1100"
    class="qc-custom-dialog dialog-wrap"
    :before-close="beforeClose"
  >
    <el-scrollbar class="dialog-scroll-wrap">
      <Table
        ref="tableDialogRef"
        :columns="data.columns"
        :toolbar="data.toolbar"
        :query="data.query"
        :params="{ id: data.id }"
        @get-list="getData"
      ></Table>
    </el-scrollbar>
  </el-dialog>
</template>

<script lang="ts" setup name="dialog-label-user">
import Table from '@/components/table/index.vue';
import {
  queryUserLabelList,
  EXPORT_LABELUSERLIST,
} from '@/service/apis/market';
import { USER_TYPE, USER_TYPES } from '@/utils/dictionaries';
import { exportFile } from '@/utils/utils';

const tableDialogRef = ref();
let dialogVisible = ref(false);

const data = reactive({
  id: '',
  columns: [
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'userName',
      label: '用户姓名',
    },
    {
      prop: 'plateNumber',
      label: '车牌号',
    },
    {
      prop: 'unit',
      label: '用户类型',
      dic: USER_TYPES,
    },
    {
      prop: 'mobile',
      label: '手机号',
      width: 110,
    },
    {
      prop: 'isFrozen',
      label: '状态',
      dic: USER_TYPE,
    },
    {
      prop: 'createTime',
      label: '注册时间',
      width: 150,
    },
    {
      prop: 'labelTime',
      label: '标签绑定时间',
      width: 150,
    },
  ],
  query: [
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '用户姓名',
      prop: 'userName',
      comName: 'input',
      props: {
        placeholder: '请输入用户姓名',
      },
    },
    {
      label: '用户类型',
      prop: 'unit',
      comName: 'select',
      props: {
        placeholder: '请选择用户类型',
        change: (value: any) => {
          console.log(value);
        },
        options: USER_TYPES,
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    // {
    //   label: '车牌号',
    //   prop: 'plateNumber',
    //   comName: 'input',
    //   props: {
    //     placeholder: '请输入车牌号',
    //   },
    // },
    {
      label: '用户状态',
      prop: 'isFrozen',
      comName: 'select',
      props: {
        placeholder: '请选择用户状态',
        change: (value: any) => {
          console.log(value);
        },
        options: USER_TYPE,
      },
    },
    {
      label: '注册时间',
      prop: 'time',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'labelList.export',
      icon: 'icon-export',
      type: 'primary',
      handle: (row: any) => {
        const form = tableDialogRef.value?.getForm();
        if (form?.time?.length > 0) {
          form.startTime = form.time[0];
          form.endTime = form.time[1];
        }
        form.id = data.id;
        exportFile(EXPORT_LABELUSERLIST, '标签成员', form);
      },
    },
  ],
});

const getData = (page: any = { pageNo: 1, pageSize: 10 }, search: any = {}) => {
  const form = search.ruleForm || {};
  if (form?.time?.length > 0) {
    form.startTime = form.time[0];
    form.endTime = form.time[1];
  } else {
    form.startTime = '';
    form.endTime = '';
  }
  form.id = data.id;
  queryUserLabelList(form, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableDialogRef.value?.setTable({
          total: res.total,
          table: res.list,
        });
      });
    }
  });
};

const show = (row: any) => {
  data.id = row.id;
  dialogVisible.value = true;
  tableDialogRef.value?.clearData();
  getData();
};

const beforeClose = (done: any) => {
  tableDialogRef.value.handleReset1();
  done();
};

defineExpose({
  show,
});
</script>